<template>
  <div class="list-echarts two">
    <img class="twotopimg" src="../../assets/images/twotop-1.png" alt="">
    <div class="ltitle">机构分布</div>
    <div class="imbox">
      <img src="../../assets/images/threetop-1.png" alt="" class="imgs">
      <div>
        <span style="color: #00fff6;font-size: 27px;font-weight: bold;">{{all_number}}<span style="color: #00fff6;font-size: 12px;">家</span></span>
        <span style="display: block;color: #ffc200;margin-top: 5px;font-weight: 600;">已认证</span>
        <img @click="centershow()" src="../../assets/images/xq.png" alt="" style="position: absolute;right: 18px;top: 65px;cursor: pointer;width: 65px!important;height: 34px!important;">
      </div>
    </div>
    <div style="margin-top: 25px;padding-bottom: 25px;width: 265px;margin-left: 170px;">
      <div class="zlie">
        <div style="width: 40%;justify-content: flex-start;">机构名称</div>
        <div>提供课程数量</div>
        <div>进校数量</div>
      </div>
      <div style="min-height: 190px;">
        <div class="zlielist" v-for="(item,index) in list" :key="index">
          <div style="width: 40%;justify-content: flex-start;">{{item.name}}</div>
          <div>{{item.admissions_number}}</div>
          <div>{{item.open_class_number}}</div>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: flex-end;border-bottom: 1px dashed #50759f;border-top: 1px dashed #50759f;" class="page">
      <div class="pagination" style="width: 405px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :page-size="5"
          :page-count="page_count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { institut } from '@/api/user.js'
  export default {
    name: 'institutional',
    components: {},
    props: ["qyvalue"],
    data() {
      return {
        page: 1,
        limit: 5,
        page_count: 0,
        all_number: '',
        list: []
      }
    },
    computed: {},
    watch: {
      qyvalue:{
        deep:true,
        immediate: true,
        handler(newVal,oldVal){
          if (newVal!='') {
            this.institutufn()
          }
        }
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      centershow() {
        this.$emit('centershow',2)
      },
      institutufn() {
        var that = this,
        params = {
          page: this.page,
          limit: this.limit,
          school_area_id: this.qyvalue
        }
        institut(params).then(res => {
          this.page_count = res.data.page_count
          this.all_number = res.data.all_number
          this.list = res.data.data
        })
      },
      handleSizeChange() {
        this.page = val
        this.institutufn()
      },
      handleCurrentChange(val) {
        this.page = val
        this.institutufn()
      }
    }
  }
</script>
<style scoped lang="less">
  .two{
    position: relative;
    margin-top: 25px;
    // padding-right: 20px;
    box-sizing: border-box;
    .twotopimg{
      position: absolute;
      left: -10px;
      top: 0;
    }
    .ltitle{
      position: absolute;
      left: 0px;
      top: 0;
      font-size: 18px;
      color: white;
      font-weight: bold;
      writing-mode:vertical-lr;
      letter-spacing: 4px;
    }
    .imbox{
      .imgs{
        width: 90px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 40px;
      }
      div{
        width: 93px;
        position: absolute;
        top: 60px;
        left: 40px;
      }
    }
    .zlie{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: linear-gradient(to bottom,#004678,#006d99,#0082ab);
      color: white;
      border-radius: 5px;
      padding: 10px;
      font-size: 12px;
      font-weight: bold;
      div{
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .zlielist{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #79d6e2;
      border-radius: 2px;
      padding: 10px;
      font-size: 12px;
      font-weight: bold;
      position: relative;
      div{
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .zlielist::after {
      content: "";
      display: block;
      width: 265px;
      height: 7px;
      background: url(../../assets/images/threetop-2.png) no-repeat;
      background-size: 265px 7px;
      bottom: 0;
      left: 0;
      position: absolute;
    }
    .pagination{
      padding: 10px 0;
    }
  }
</style>
